﻿@model LoginViewModel

<link rel="stylesheet" href="~/css/login.css" />

<div class="login-page">
    <partial name="_IdsValidationSummary" />

    @if (Model.EnableLocalLogin)
    {
        <div class="row">
            <form class="form-signin" asp-route="Login">
                <div class="text-center mb-4">
                    <img class="mb-4" src="/docs/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
                    <h1 class="h3 mb-3 font-weight-normal">Login</h1>
                </div>
                <input type="hidden" asp-for="ReturnUrl" />
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <span title="Username" aria-hidden="true">
                                    <svg class="icon svg-icon" aria-hidden="true">
                                        <use xlink:href="#icon-iconuser"></use>
                                    </svg>
                                </span>
                            </div>
                        </div>
                        <input type="text" class="form-control" placeholder="Username" asp-for="Username" autofocus>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <span title="Password" aria-hidden="true">
                                    <svg class="icon svg-icon" aria-hidden="true">
                                        <use xlink:href="#icon-lock_circle"></use>
                                    </svg>
                                </span>
                            </div>
                        </div>
                        <input type="password" class="form-control" placeholder="Password" asp-for="Password" autocomplete="off">
                    </div>
                </div>
                <div class="form-group form-check">
                    <input type="checkbox" class="form-check-input" asp-for="RememberLogin">
                    <label class="form-check-label" asp-for="RememberLogin"><strong>Remember me</strong></label>
                    <label class="form-check-label float-right"><a href="#">Forgot Password?</a></label>
                </div>
                <button class="btn btn-lg btn-primary btn-block" name="button" value="login">Login</button>
                <button class="btn btn-lg btn-secondary btn-block" name="button" value="cancel">Cancel</button>
            </form>
        </div>
    }

    @if (Model.VisibleExternalProviders.Any())
    {
        <div class="row">
            <div class="form-signin login-three">
                <span>使用第三方账号直接登录</span>
                <div class="login-icon">
                    @foreach (var provider in Model.VisibleExternalProviders)
                    {
                        <a class="mr-sm-3" asp-controller="External"
                           asp-action="Challenge"
                           asp-route-provider="@provider.AuthenticationScheme"
                           asp-route-returnUrl="@Model.ReturnUrl"
                           title="@provider.DisplayName" aria-hidden="true">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-oauth-@provider.DisplayName"></use>
                            </svg>
                        </a>
                    }
                </div>
            </div>
        </div>
    }

    @if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
    {
        <div class="row">
            <div class="form-signin">
                <div class="alert alert-warning">
                    <strong>Invalid login request</strong>
                    There are no login schemes configured for this client.
                </div>
            </div>
        </div>
    }
</div>